<script lang='ts' setup>
import {ref, watch} from 'vue';

const boxVisible = ref(true)
const props = withDefaults(defineProps<{
  title: string,
  contentText: string,
  visible: boolean,
  width?: string,
  center?: boolean
}>(), {
  title: '提示',
  contentText: '提示内容',
  width: '400px',
  center: true,
})
const emits = defineEmits<{
  (e: "confirm"): void,
  (e: "cancel"): void,
  (event: "update:visible", val: boolean): void
}>()

function cancel() {
  emits('cancel')
  emits('update:visible', false)
}

function confirm() {
  emits('confirm')
  emits('update:visible', false)
}

watch(() => props.visible, (val: boolean) => {
  boxVisible.value = val
}, {
  immediate: true
})
</script>
<template>
  <el-dialog v-model="boxVisible" :close-on-press-escape="false" :show-close="false"
             :width="width" :center="center" :title="title"
             append-to-body :close-on-click-modal="false">
    <template #header>
      <div class="message_header">
        <el-icon color="orange" style="vertical-align: middle;">
          <InfoFilled/>
        </el-icon>
        {{ title }}
      </div>
    </template>
    <span class="message_content">{{ contentText }}</span>
    <template #footer>
      <slot name="buttonGroup">
              <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
              </span>
      </slot>

    </template>
  </el-dialog>
</template>
<style scoped lang='scss'>
.message {
  &_header {
    font-size: 18px;
    vertical-align: middle;
  }

  &_content {
    font-size: 16px;
  }
}
</style>